<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
    @font-face {
        font-family: 'YSBangBang';
        src: url('/Public/game/fonts/YSBangBang.ttf') format('truetype');
    }
    html, body{
        height: 100%; width: 100%; padding: 0;
    }
    body{
        background: url('/Public/game/images/back.jpg') center no-repeat; background-size: cover;
        font-family: 'YSBangBang';color: white;font-weight: normal;
    }
    #main {
        display: flex; flex-direction: column; align-items: center; height: 60vh;overflow: hidden;padding-top:20vh;
        -webkit-user-select: none; /* Safari */
        -ms-user-select: none; /* IE 10 and IE 11 */
        user-select: none; /* Standard syntax */
    }
    h3{
        font-size: 2rem; color: white;font-weight: normal;text-align: center; padding-bottom: 2vh;
    }
    #title{
        height: 20vh; margin-bottom: 10vh;
    }
    button{
       background: url('/Public/game/images/btn_start.png') center no-repeat;background-size: 100% 100%; 
       padding:0.4rem 1.2rem 1rem; font-size: 2rem;color: white;border: none; cursor:pointer;
       
    }
    button:hover{
        color:white;
    }
    button:active{
        transform: scale(0.9); 
    }#result{
        padding-bottom: 15vh;
    }
</style>
<body>
    <div id="main">
        <div id="title">
            <h3>
                【怒敲Enter】请在60秒内敲击400次Enter（男生）/300次Enter（女生）
            </h3>
        </div>
        <div id="result">
            <h3></h3>
        </div>
        <div id="game">
            <h3>
                倒计时：<span id="time">60</span>秒<br/>
                敲击：<span id="press-count">0</span>次<br/>
            </h3>
        </div>

        <div class="btn">
            <button class="start" onclick="gameStart(400)">男生开始</button>
            <button class="start" onclick="gameStart(300)">女生开始</button>
        </div>
        
    </div>
</body>
<script>
function getUrlParams(url) {
    const searchParams = new URLSearchParams(url.split('?')[1]);
    const params = {};
    for (const [key, value] of searchParams.entries()) {
        params[key] = value;
    }
    return params;
}
let params = getUrlParams(window.location.href);
let interval
let intervalStatus = false;
console.log(params);
let pressCount = 0
let target = 999

document.addEventListener('keyup', function(event){
    if(intervalStatus){
        if(event.key == 'Enter'){
            pressCount ++
            $("#press-count").text(pressCount)
            if(pressCount == target){
                gameResult('win')
            }
            console.log(pressCount);
        }
    }
})

function gameInit(){
    pressCount = 0;
    target = 999
    $("#game").hide();
    $("#result").hide()
    $("#restart").hide()
    $("#time").text("60")
    $("#press-count").text(pressCount)
    $(".diff").css("opacity",0)
    clearInterval(interval)
    intervalStatus = false;
}

function gameStart(e){
    gameInit();
    $(".start").hide();
    $("#game").show();
    target = e
    let targetTime = new Date().getTime() + 60000;
    interval = setInterval(function(){
        let now = new Date().getTime();
        if(now >= targetTime){
            gameResult('lose')
            return; 
        }
        let time = Math.round((targetTime - now) / 1000);
        $("#time").text(time);
    }, 100)
    intervalStatus = true;

}
function gameResult(res){
    console.log(res);
    clearInterval(interval);
    intervalStatus = false
    $("#game").hide();
    $("#result").show();
    $(".start").show()
    if(res == 'win'){
        $("#result h3").text("恭喜通关！")
        pressCount = 0
        $.ajax({
            url:'/Home/Trial/set_game_success?id=' + params.id,
        })
    }else{
        $("#result h3").text("游戏失败！")
        pressCount = 0
    }
}
gameInit();
</script>
</html>